<template>
  <div id="class-member-container">
    <el-form :inline="true" :model="queryParams" class="header">
      <el-form-item label="班级名">
        <el-input
          v-model="queryParams.className"
          placeholder="请输入班级名"
          clearable
          @input="getMemberList"
        />
      </el-form-item>
      <el-form-item label="学号">
        <el-input
          v-model="queryParams.account"
          placeholder="请输入学号"
          clearable
          @input="getMemberList"
        />
      </el-form-item>
      <el-form-item label="学生姓名">
        <el-input
          v-model="queryParams.studentName"
          placeholder="请输入学生姓名"
          clearable
          @input="getMemberList"
        />
      </el-form-item>
      <el-form-item label="学院">
        <el-select
          v-model="queryParams.deptId"
          placeholder="请选择学院"
          clearable
          @change="handleDeptChange"
        >
          <el-option
            v-for="dept in departments"
            :key="dept.id"
            :label="dept.deptName"
            :value="dept.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="专业">
        <el-select
          v-model="queryParams.majorId"
          placeholder="请选择专业"
          clearable
          :disabled="!majorList.length"
          @change="getMemberList"
        >
          <el-option
            v-for="major in majorList"
            :key="major.id"
            :label="major.majorName"
            :value="major.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年级">
        <el-select
          v-model="queryParams.gradeId"
          placeholder="请选择年级"
          clearable
          @change="getMemberList"
        >
          <el-option
            v-for="grade in gradeList"
            :key="grade.id"
            :label="grade.gradeName"
            :value="grade.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getMemberList">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="content">
      <el-table :data="tableData" border size="small" style="width: 100%">
        <el-table-column prop="className" label="班级" align="center" />
        <el-table-column prop="account" label="学号" align="center" />
        <el-table-column prop="username" label="姓名" align="center" />
        <el-table-column prop="deptName" label="所在系" align="center" />
        <el-table-column prop="majorName" label="专业" align="center" />
        <el-table-column prop="gradeName" label="年级" align="center" />
      </el-table>
      <el-pagination
        class="table-pagination"
        background
        layout="total, prev, pager, next, jumper, sizes"
        :current-page="queryParams.pageNo"
        :page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { queryClassMembers } from "@/api/class";
import { getMajorByDeptId } from "@/api/major";
import { getAllGrade } from "@/api/grade";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("dept", ["departments"]),
  },
  data() {
    return {
      queryParams: {
        deptId: null,
        majorId: null,
        gradeId: null,
        className: "",
        studentName: "",
        account: "",
        pageNo: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,

      majorList: [],
      gradeList: [],
    };
  },
  methods: {
    // 获取所有系的id和name
    getAllDeptInfo() {
      this.$store.dispatch("dept/getAllDept");
    },
    async getMemberList() {
      const res = await queryClassMembers(this.queryParams);
      if (res.code === 200) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    async handleDeptChange(deptId) {
      this.queryParams.majorId = null;
      if (!deptId) {
        this.majorList = [];
        this.getMemberList();
        return;
      }
      const res = await getMajorByDeptId(deptId);
      if (res.code === 200) {
        this.majorList = res.data;
      }
      this.getMemberList();
    },
    handleCurrentChange(page) {
      this.queryParams.pageNo = page;
      this.getMemberList();
    },
    handleSizeChange(size) {
      this.queryParams.pageSize = size;
      this.queryParams.pageNo = 1;
      this.getMemberList();
    },
    getDeptList() {
      this.$store.dispatch("dept/getAllDept");
    },
    async handleDeptChange(deptId) {
      this.queryParams.majorId = null;
      if (!deptId) {
        this.majorList = [];
        this.getMemberList();
        return;
      }
      const res = await getMajorByDeptId(deptId);
      if (res.code === 200) {
        this.majorList = res.data;
      }
      this.getMemberList();
    },
    async getGradeList() {
      const res = await getAllGrade();
      if (res.code === 200) {
        this.gradeList = res.data;
      }
    },
  },
  mounted() {
    this.getDeptList();
    this.getGradeList();
    this.getMemberList();
    if (this.departments.length === 0) {
      this.getAllDeptInfo();
    }
  },
};
</script>

<style lang="scss" scoped>
#class-member-container {
  margin: 20px;
  .header {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
  }
  .content {
    margin-top: 20px;
    .table-pagination {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>